<template>
    <div class="from" @click="handleClick">
        <div class="item">
            <div>学号： <input type="text" ref="myInput" v-model="student" placeholder="请输入数字" @input="limitToNumbers"
                    @keydown.enter="submitForm" autofocus></div>
            <span v-show="!student && formSubmitted" style="color: red;position: absolute;">此字段为必填项</span>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../store/index';
const Store = useAuthStore();
// import { shell } from'electron'
const myInput = ref()
const student = ref('');
const garde = ref('');
const classs = ref('');
const formSubmitted = ref(false);
const limitToNumbers = (event) => {
    // 使用正则表达式替换非数字字符为空字符串
    student.value = event.target.value.replace(/\D/g, '');
};
const handleClick = (event) => {
    console.log(3);

    // 获取点击事件的目标元素
    const target = event.target;
    // 如果目标元素不是输入框或者输入框的子元素，则让输入框失去焦点
    if (!myInput.value.contains(target)) {
        myInput.value.focus();
    }
};
const submitForm = () => {
    formSubmitted.value = true;
    if (!student.value || student.value.length != 5) {
        // 如果输入值为空，则阻止表单提交
        return;
    } else {
        Store.setuser({
            stuId: student.value
        });
        router.push('/select')


    }
    // 处理表单提交逻辑

};
const router = useRouter();

const experimentContainer = ref < HTMLDivElement | null > (null);
onMounted(() => {
    // myInput.value.focus();

    // axios({
    //     method: "get",
    //     url: "/challenge/background"
    // }).then((res) => {
    //     console.log(res.data.data);
    //     var x = {
    //         height: res.data.data.backgroundSize.split(" ")[0],
    //         width: res.data.data.backgroundSize.split(" ")[1],
    //         color: res.data.data.backgroundColor,
    //     }
    //     Store.setbackground(x);

    // })
})



</script>
<style scoped>
/* #app {
    cursor: auto;
} */

.from {
    height: 100%;
    width: 100%;
    /* cursor:auto; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    font-size: 60px;
}

.item {
    display: flex;
    flex-direction: column;
    position: relative;
}

span {
    color: red;
    position: absolute;
    top: 100%;
    left: 50%;
}
</style>